有時候專案變得龐大且複雜，將所有的樣式都放在一個文件中會變得難以維護。
這時，可以使用 SCSS 的 分割 (Partials) 和 導入 (Imports) 功能，將樣式拆分成多個小文件，讓程式碼更易於管理與維護。

Partials 是指以 _ 開頭命名的 SCSS 文件，代表這個文件是個部分，並不會直接被編譯成 CSS。例如，建立 _variables.scss、_mixins.scss、_header.scss 等文件，分別儲存變量、混入、以及網頁 header 區域的樣式。

一、使用範例

1.建立 Partials 文件

variables.scss：儲存變量
mixins.scss：儲存混入
header.scss：儲存 header 樣式

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;

// _mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

// _header.scss
.header {
  background-color: $primary-color;
  color: white;
  padding: 20px;
  @include border-radius(5px);
}

2.導入 Partials 文件

在主 SCSS 文件中，透過 @import 導入上述的部分文件：

// styles.scss
@import 'variables';
@import 'mixins';
@import 'header';

3.編譯後的 CSS

.header {
  background-color: #3498db;
  color: white;
  padding: 20px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      -ms-border-radius: 5px;
          border-radius: 5px;
}

二、組織大型項目

在大型專案中，利用 Partials 可以按照功能或區域劃分樣式，例如：

/styles
  |_ _variables.scss//變量設定
  |_ _mixins.scss//混入
  |_ _reset.scss//重置
  |_ _header.scss//首頁
  |_ main.scss//主文件
  //主文件 main.scss 負責導入所有的 Partials 文件，使得專案更具可讀性與維護性。

我隨意找了幾個恰當的且好閱讀檔案名稱~~

總而言之，透過分割與導入，可以模組化管理 SASS 樣式，為大型專案提供更好的結構與組織，讓程式碼更加清晰、可維護。
宵夜好吃喔